<template>

      <a-form :form="form">
        <a-card id="staffCard" style="margin: 0 auto;width: 1000px">
          <span id="documentsIssuedTitle">发文单</span>
          <table border="1px" id="documentsIssueTable">
            <tr>
              <td class="firstTr">公文标题</td>
              <td class="firstTr" colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input class="text" v-decorator="[ 'title', {}]"/>
                </a-form-item>
              </td>
              <td class="firstTr">发文字号</td>
              <td class="firstTr" colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input style="text-align: left" class="text" readOnly placeholder="< 系统自动生成 >" v-decorator="[ 'docCode']"/>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td>
                公文分类
              </td>
              <td colspan="2" style="width:200px;text-align: left;padding-left: 10px;">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                <a-radio-group class="fontiframe" name="radioGroup" v-decorator="[ 'docType', {}]">
                  <a-radio class="radioGroup" value="1">普通文件</a-radio>
                  <a-radio class="radioGroup" value="2">盖章文件</a-radio>
                  <a-radio class="radioGroup" value="3">正式文件</a-radio>
                </a-radio-group>
                </a-form-item>
              </td>
              <td>
                文种
              </td>
              <td colspan="2" style="width:200px;text-align: left;padding-left: 10px;">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-select v-decorator="[ 'classification', {}]">
                    <a-select-option value="1">公告</a-select-option>
                    <a-select-option value="2">通知</a-select-option>
                  </a-select>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td>
                缓急程度
              </td>
              <td colspan="2" style="width:200px;text-align: left;padding-left: 10px;">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-radio-group class="fontiframe" name="radioGroup" v-decorator="[ 'urgency', {}]">
                    <a-radio class="radioGroup" value="1">普通</a-radio>
                    <a-radio class="radioGroup" value="2">特急</a-radio>
                    <a-radio class="radioGroup" value="3">紧急</a-radio>
                  </a-radio-group>
                </a-form-item>
              </td>
              <td>
                印刷份数
              </td>
              <td>
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input class="text" v-decorator="[ 'printScore', {}]"/>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td>
                发文目标
              </td>
              <td colspan="2" style="width:260px;text-align: left;padding-left: 10px;">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-radio-group class="fontiframe" name="radioGroup" v-decorator="[ 'sendTarget', {}]" >
                    <a-radio class="radioGroup" value="1">公司内</a-radio>
                    <a-radio class="radioGroup" value="2">公司外</a-radio>
                    <a-radio class="radioGroup" value="3">子公司</a-radio>
                    <a-radio class="radioGroup" value="4">主公司</a-radio>
                  </a-radio-group>
                </a-form-item>
              </td>
              <td>
                机密程度
              </td>
              <td colspan="2" style="width:200px;text-align: left;padding-left: 10px;">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-radio-group class="fontiframe" name="radioGroup" v-decorator="[ 'confidentiality', {}]">
                    <a-radio class="radioGroup" value="1">公开</a-radio>
                    <a-radio class="radioGroup" value="2">秘密</a-radio>
                    <a-radio class="radioGroup" value="3">机密</a-radio>
                    <a-radio class="radioGroup" value="4">绝密</a-radio>
                  </a-radio-group>
                </a-form-item>
              </td>
            </tr>

            <tr>
              <td>
                机关代字
              </td>
              <td colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input class="text" v-decorator="[ 'officeCode', {}]"/>
                </a-form-item>
              </td>
              <td>
                排序码
              </td>
              <td colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input-number class="text" v-decorator="[ 'orderNo', {}]"/>
                </a-form-item>
              </td>
            </tr>

            <tr>
              <td>
                主题词
              </td>
              <td colspan="5">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-textarea
                    v-decorator="[ 'theme', {}]"
                    style="resize:none;height:118px;font-size: 12px;border: 0px solid white;border-radius: 0px;margin-bottom: 0px;">

                  </a-textarea>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td>
                收文人
              </td>
              <td colspan="5">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-textarea
                    v-decorator="[ 'receiverName', {}]"
                    style="resize:none;height:118px;font-size: 12px;border: 0px solid white;border-radius: 0px;margin-bottom: 0px;">

                  </a-textarea>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td>
                文件
              </td>
              <td colspan="5">

              </td>
            </tr>
            <tr>
              <td>
                登记人
              </td>
              <td colspan="2">
                <span>{{nickname}}</span>
              </td>
              <td>
                登记时间
              </td>
              <td colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-date-picker
                    class="input"
                    placeholder=""
                    format='YYYY-MM-DD'
                    v-decorator="[ 'bookDate', {}]"/>
                </a-form-item>
              </td>
            </tr>
            <tr>
              <td>
                成文日期
              </td>
              <td colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-date-picker
                    class="input"
                    placeholder=""
                    format='YYYY-MM-DD'
                    v-decorator="[ 'writtenDate', {}]"/>
                </a-form-item>
              </td>
              <td>
                审阅时间
              </td>
              <td colspan="2">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-date-picker
                    class="input"
                    placeholder=""
                    format='YYYY-MM-DD'
                    v-decorator="[ 'reviewDate', {}]"/>
                </a-form-item>
              </td>
            </tr>
          </table>
          <div style="text-align:center;margin-top: 10px">
            <a-button type="primary" @click="handleOk()">保存</a-button>
          </div>
        </a-card>
      </a-form>
</template>

<script>
  import { httpAction,getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import store from '@/store'

  export default {
    name: "JoaDocSendingFormOpt",
    props: ['formData'],
    data () {
      return {
        docTypeFlag:"",//公文分类标识
        urgencyFlag:"",//缓急程度标识
        sendTargetFlag:"",//发文目标标识
        confidentialityFlag:"",//机密程度标识
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 25 },
        },
        nickname:"",
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        url: {
          queryById: "/joa/joaDocSending/queryById",
          edit: "/joa/joaDocSending/edit",
        },
      }
    },
    created () {
      this.init();
    },
    methods: {
      init(){
        console.log("form start");
        console.log("formdata",this.formData);
        var params = {id:this.formData.dataId};//查询条件
        getAction(this.url.queryById,params).then((res)=>{
          if(res.success){
            console.log("获取流程节点信息",res);
            this.edit (res.result);
          }
        })
      },
      add () {
        this.edit({docType:"1",classification:"1",urgency:"1",sendTarget:"1",confidentiality:'1'});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.nickname=store.getters.nickname;
        this.model.booker=store.getters.username;
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'docCode','orderNo','officeCode','title','theme','printScore','receiverName','docType','classification','urgency','sendTarget','confidentiality'))
          //时间格式化
          this.form.setFieldsValue({bookDate:this.model.bookDate?moment(this.model.bookDate):null})
          this.form.setFieldsValue({writtenDate:this.model.writtenDate?moment(this.model.writtenDate):null})
          this.form.setFieldsValue({reviewDate:this.model.reviewDate?moment(this.model.reviewDate):null})
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            formData.bookDate = formData.bookDate?formData.bookDate.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.writtenDate = formData.writtenDate?formData.writtenDate.format('YYYY-MM-DD HH:mm:ss'):null;
            formData.reviewDate = formData.reviewDate?formData.reviewDate.format('YYYY-MM-DD HH:mm:ss'):null;

            console.log(formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                this.init();
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style>
  #staffCard {
    border: 1px solid white;
    box-shadow: 0px 0px 1px 1px #aaa,
    3px 0px 5px 0px #aaa,
    0px 4px 7px 0px #aaa;
  }

  #documentsIssuedTitle {
    margin-top: 1px;
    font-weight: bold;
    text-align: center;
    display: block;
    color: black;
    font-size: 24px;;
  }

  #documentsIssueTable {
    width: 100%;
    font-size: 12px;
    text-align: center;
    background-color: #ffffff;
  }

  #documentsIssueTable td {
    font-family: "微软雅黑";
    color: #000000;
  }

  #documentsIssueTable tr {
    height: 40px;
  }

  #documentsIssueTable .fontiframe {
    font-size: 12px;
  }

  #documentsIssueTable .ant-form-item {
    margin: 0px;
  }

  #documentsIssueTable .input .ant-input {
    border: 0px solid black !important;
    border-radius: 0px;
    display: inherit;
    background-color: #ffffff;
    margin: 0px auto;
    width: 100%;
    font-size: 12px;
    height: 38px;
  }

  #documentsIssueTable .ant-select-selection{
    background-color: #fff;
    border-radius: 0px;
    border: 0px solid #d9d9d9;
    border-top-width: 0px;
    height: 40px;
    padding-top: 4px;
  }


  #documentsIssueTable .text {
    border: 0px solid black !important;
    border-radius: 0px;
    background-color: #ffffff;
    margin: 0px auto;
    width: 100%;
    font-size: 12px;
    text-align: center;
    height: 38px;
  }

  #documentsIssueTable .colfirst {
    width: 90px;
  }

  #documentsIssueTable .colfour {
    width: 90px;
  }

  #documentsIssueTable .firstTr {
    width: 100px;
  }

  #documentsIssueTable .radioGroup {
    font-size: 12px;
  }

  #documentsIssueTable .smallText .ant-input-number-input {
    background-color: #FFFFFF;
    margin: 0px;
    border: 0px solid black !important;
    border-radius: 0px;
    font-size: 12px;
  }

  #documentsIssueTable .ant-input-number {
    border: 0px solid black !important;
    border-radius: 0px;
  }

  #documentsIssueTable .ant-upload-list{
    border:1px solid #969696;
    width: 99%;
    margin: auto;
    height:auto;
    padding: 11px;
    min-height: 90px;
    border-top: 0px;
    margin-bottom: 5px;
  }

</style>
